<template>
    <div class="lots warp">
        <div class="lots_type">
            <div class="table">
                <div class="tr_border">
                    <div class="td_type">
                        标的类型
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="typeAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="value in lotsTypeList" :key="value.id" @click="showLotsChildren(value.children,value.id)">
                                    <span :class='{stateFoucs:lotsLX==value.id}'>{{value.classname}}</span>
                                </li>
                            </ul>
                            <div v-show="typeAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="typeChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in lotsTypeListChildren" :key="i" @click="lotsTypeChild(val.id,i)">
                                        <span :class='{stateFoucs:lotsChildLX==i}'>{{val.classname}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        标的所在地
                    </div>
                    <div class="td_all">
                        <div class="td_all_val" @click="adressAll">全部</div>
                        <div class="ta_all_item">
                            <ul class="all_item_ul" style="height: auto;">
                                <li v-for="value in areaList" :key="value.id" @click="showAreaChildren(value.children,value.id)">
                                    <span :class='{stateFoucs:lotsAreaStyle==value.id}'>{{value.name}}</span>
                                </li>
                            </ul>
                            <div v-show="adressAllShow" class="all_item_value">
                                <ul>
                                    <li>
                                      <span class="all_li_span" @click="adressChildAll">全部</span>  
                                    </li>
                                    <li v-for="(val,i) in areaListChildren" :key="i" @click="lotsAreaChild(val.id,i)">
                                        <span :class='{stateFoucs:AreaChildStyle==i}'>{{val.name}}</span>
                                    </li>
                                </ul> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tr_border">
                    <div class="td_type">
                        标的状态
                    </div>
                    <div class="td_all stateAll">
                        <div class="td_all_val" @click="stateAll">全部</div>
                        <ul class="all_item_ul">
                            <li v-for="(val,i) in lotsStateList" :key="i" @click="stateListChild(val.id,i)">
                                <span :class='{stateFoucs:stateLotsStyle==i}'>{{val.val}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- <div class="tr4">
                    <div class="td_type">
                        开拍时间
                    </div>
                    <div class="td_all stateAll">
                        <div class="td_all_val" @click="timeAll">全部</div>
                        <ul class="all_item_ul">
                            <li v-for="(val,i) in lotsTimeList" :key="i">
                                <span class="val timeFoucs" tabindex="3">{{val.val}}</span>
                            </li>
                        </ul>
                        <div>
                            <el-date-picker
                            size="mini"
                            v-model="starttime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
       
        <!-- <auctioneerCard 
        :lotsCardData="lotsCardList"/> -->
        <el-empty v-if="emptyShow" :description=description :image-size='300'></el-empty> 
        <div class="card" v-else> 
            <ul class="pai-item-list">
                <li v-for="(val,i) in lotsCardList" :key="i" class="pai-item">
                    <div class="link_wrap" @click="routeDetail(val)">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                            <el-image :src="imgurls+ val.image" alt="" class="lot_pic"></el-image>
                            <div v-if="val.state=='7'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    等待拍卖师操作
                                </span>
                            </div>
                        </div>
                        
                        <div class="item_content">
                            <div class="item_title">
                                <div class="in_item_title">
                                    {{val.name}}
                                </div>
                            </div>
                            <div class="item_money">
                            <p>
                                <span v-if="val.state=='1'||val.state=='4'||val.state=='5'">起拍价</span>
                                <span v-if="val.state=='2'||val.state=='6'||val.state=='7'">当前价</span>
                                <span v-if="val.state=='3'">成交价</span>

                                <span v-if="val.state=='2'||val.state=='3'||val.state=='6'||val.state=='7'" class="red moneyBig">
                                    {{val.prices | formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='4'||val.state=='5'" class="gray moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='1'" class="green moneyBig">{{val.prices| formatNumber}}元
                                    <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                
                                
                            </p>
                            <div v-if="val.state=='1'" class="item_money_time">
                                <p>预计{{val.time}}开始</p>
                                <p class="greenBtn">即将开始</p>
                            </div>
                            <div v-if="val.state=='2'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <p class="redBtn">正在进行</p>
                            </div>
                            <div v-if="val.state=='3'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已成交</p>
                            </div>
                            <div v-if="val.state=='4'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="grayBtn">已流拍</p>
                            </div>
                            <div v-if="val.state=='5'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <p class="redBtn">已撤拍</p>
                            </div>
                            <div v-if="val.state=='7'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <!-- <p class="redBtn">等待拍卖师操作</p> -->
                            </div>
                            </div>  
                            <div class="item_bottom clearfix">
                                <div>
                                <span>{{val.viewcount}}次围观</span>
                                </div>
                                <!-- <el-divider direction="vertical"></el-divider> -->
                                <div>
                                <span>{{val.history_count}}次出价</span>
                                </div>
                                <!-- <el-divider direction="vertical"></el-divider> -->
                                <div>
                                    <i class="el-icon-star-on" :class="[val.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar(val.id)"></i>
                                    <span>关注</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
            <div class="footer_page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filterObj.page"
                    :page-sizes="[12,20, 30, 40,50]" :page-size="filterObj.limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>  
            </div>
            
        </div> 
        
        
        
    </div>
</template>

<script>
import {getUserInfoID,timestampToTime} from '@/utils/auth'
import auctioneerCard from './auctioneer/auctionCard.vue' 
import {LotsTypeList,AreaList,lotsList,clickFollow} from '@/api/interface'
export default{
    name:'lots',
    components:{
        auctioneerCard
    },
    data() {
        return {
            uid:'',
            total: 1,
            lotsTypeList:[],
            lotsTypeListChildren:[],
            areaList:[],
            areaListChildren:[],
            typeAllShow:false,
            adressAllShow:false,
            lotsStateList:[
                {id:1,val:'即将开始'},
                {id:2,val:'正在进行'},
                {id:3,val:'成交'},
                {id:4,val:'流拍'},
                {id:5,val:'撤拍'}
            ],
            lotsTimeList:[
                {id:1,val:'未来3天'},
                {id:2,val:'未来7天'},
                {id:3,val:'未来15天'}
            ],
            starttime:'',
            filterObj:{
                page:1,
                limit:12,
                type_pid:'',
                type_id:'',
                location_pid:'',
                location_id:'',
                state:'',
                keywords:''
            },
            lotsCardList:[],
            colorYe:'',
            stateFoucs:'stateFoucs',
            lotsLX:null,
            lotsChildLX:null,
            lotsAreaStyle:null,
            AreaChildStyle:null,
            stateLotsStyle:null,
            description:'',
            emptyShow:false,
            picSamll:'',
            picBig:'',
            radio2:'1',
        };
    },
    watch:{
        filterObj:{
            handler(val){
                // console.log('obj',val);
                let newObj = Object.assign({uid:''}, val)
                this.getLotsCardList(newObj);
            },
            deep: true
        }
    },
    filters: {
        formatNumber(value) {
            if (value >= 10000) {
            return (value / 10000).toFixed(2) + '万';
            }
            return value;
        }
    },
    created(){
        var userInfo = getUserInfoID();
        if(userInfo){
            var info = JSON.parse(userInfo);
            this.uid = info.id;
        }
        this.$emit('public_header', {header:true,footer:true});
      
        var query = this.$route.query;
        if(query.hasOwnProperty('provinceId')){
            this.filterObj.location_pid  = query.provinceId;
            this.lotsAreaStyle = query.provinceId;
            this.getLotsTypeList();
        }
        if(query.hasOwnProperty('typeId')){
            this.filterObj.type_pid  = query.typeId;
            this.lotsLX = query.typeId;
            this.getLotsTypeList();
        }
        if(query.hasOwnProperty('keyWord')){
            this.getLotsTypeList();
            this.getLotsCardList({uid:this.uid,page:1,limit:12,keywords:query.keyWord});
        }
        if(JSON.stringify(query) === '{}'){
            this.getLotsTypeList();
            this.getLotsCardList({uid:this.uid,page:1,limit:12,});
        }
        
        
    },
     methods: {
        getLotsTypeList(){
            LotsTypeList().then((res) => {
                this.lotsTypeList=res.data;
            });
            AreaList().then(res=>{
                this.areaList=res.data;
            }); 
        },
        getLotsCardList(newObj){
            lotsList(newObj).then(res=>{
                if(res.code == 200){
                    this.emptyShow = false;
                    res.data.forEach(item => {
                        item.time = this.timestampToTime(item.time)
                    })
                    this.lotsCardList=res.data;
                //    var list1 = this.filterNewList(res.data,'1');
                //    var list2 = this.filterNewList(res.data,'2');
                //    var list3 = this.filterNewList(res.data,'3');
                //    var list4 = this.filterNewList(res.data,'4');
                //    var list5 = this.filterNewList(res.data,'5');
                //    var list6 = this.filterNewList(res.data,'6');
                //    var list7 = this.filterNewList(res.data,'7');

                    this.total = res.count;
                }else{
                    this.emptyShow = true;
                    this.description = res.msg;
                    this.lotsCardList=[];
                }
                
            }).catch(err =>{
                // console.log('err',err)
                this.emptyShow = true;
                this.description = err.msg;
                this.lotsCardList=[];
            });
        },
        filterNewList(list,only){
            var arr =list.filter(num =>{
                return num.state === only;
            });
            return arr;
        },
        routeDetail(val){
            let {href}= this.$router.resolve({
                path: '/lots/detail',   // 这里写的是要跳转的路由地址
                query: {lotsId:val.id,auctionid:val.auction_id}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
// -----------------------
        //展示标的类型列表li的内容
        showLotsChildren(children,pid){
            this.lotsTypeListChildren = children;
            this.lotsLX = pid;
            this.typeAllShow = true;
            this.filterObj.type_pid =pid;
        },
        typeChildAll(){
            this.lotsChildLX = null;
            this.filterObj.type_id='';
        },
        //展示标的所在地列表li的内容
        showAreaChildren(children,pid){
            this.areaListChildren=children;
            this.adressAllShow = true;
            this.filterObj.location_pid =pid; 
            this.lotsAreaStyle = pid;
        },
        adressChildAll(){
            this.filterObj.location_id='';
            this.AreaChildStyle = null;
        },
        stateListChild(id,index){
            this.filterObj.state=id;
            this.stateLotsStyle = index;
        },
 // ---------------------------------
        lotsTypeChild(id,index){
            this.filterObj.type_id=id;
            this.lotsChildLX = index;
        },
        lotsAreaChild(id,index){
            this.filterObj.location_id=id;
            this.AreaChildStyle = index;
        },

// -----------------------------
        //标的类型的全部点击后隐藏li-ul-li
        typeAll(){
            // console.log('222',this.lotsLX)
            this.lotsLX =null;
            this.typeAllShow = false;
            this.filterObj.type_pid='';
            this.filterObj.type_id='';
        },
        //标的所在地的全部点击后隐藏li-ul-li
        adressAll(){
            this.adressAllShow=false;
            this.filterObj.location_pid='';
            this.filterObj.location_id='';
            this.lotsAreaStyle = null;
        },
        stateAll(){ //标的状态的全部
            this.stateLotsStyle = null;
            this.filterObj.state='';
        },
        timeAll(){

        },
        // -------价格:上升 下降------------
        uptrendPic(){
            this.radio2 = '1'
        },
        declinePic(){
            this.radio2 = '1'
        },
        // -------出价次数:升序 降序----------
        uptrendNum(){
            this.radio2 = '2'
        },
        declineNum(){
            this.radio2 = '2'
        },
        //星星关注
        attentionStar(id){
            clickFollow({id:this.uid,lots_id:id}).then(res =>{
                if(res.code == 200){
                    let newObj = Object.assign({uid:this.uid}, this.filterObj)
                    this.getLotsCardList(newObj);
                }
            });
        },
        //将时间戳转换成日期格式
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '年';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
            var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + '日';
            var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes());
            // return Y+M+D+h+m+s;
            return Y+M+D+h+m;
        },  
        // ---------分页
        handleSizeChange(val) {
            this.filterObj.limit = val;
        },
        //----- 分页---------
        handleCurrentChange(val) {
            this.filterObj.page = val;
        }
     },
}

</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.lots{
    padding: 20px 0;
    min-height: 100vh;
    .stateFoucs{
        background-color: @base-color;
        color: #fff;
    }
    .footer_page{
        margin: 26px 0;
            /deep/ .el-pagination{
                display: flex;
                justify-content: center;
            }
        }
    .lots_type{
        
        .table{
            background: #fafafa;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            font-size: 12px;
            .tr_border{
                display: flex;
                border-bottom: 1px solid #e6e6e6;
                min-height: 46px;
            }
            .td_type{
                width: 90px;
                border-right: 1px solid #e6e6e6;
                text-align: center;
                padding-top: 14px;
            }
            .td_all{
                display: flex;
                color: #3d4246;
                padding: 10px;
                    // align-items: center;
                .td_all_val{
                    // width: 90px;
                    text-align: center;
                    cursor: pointer;
                    padding: 4px 10px;
                    margin: 0px 8px;
                    border-radius: 14px;
                    width: 24px;
                    height: 16px;
                    line-height: 16px;
                    background-color: @base-color;
                    color: #fff;
                    
                }
                .ta_all_item{
                    width: 982px;
                    .all_item_value{
                        width: 100%;
                        background: #e6e6e6;
                        display: flex;
                        border-radius: 6px;
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap:wrap;
                            &:after{
                                content: '';
                                flex: auto;
                                // width: 90px;
                            }
                            li{
                                .all_li_span{
                                    background-color: @base-color;
                                    color: #fff;
                                }
                                // width: 90px;
                                span{
                                    display: inline-block;
                                    padding: 4px 10px;
                                    margin: 4px 6px;
                                    border-radius: 14px;
                                }
                                span:hover{
                                    background-color: @base-color;
                                    color: #fff;
                                }
                                span:focus{
                                    background-color: @base-color;
                                    color: #fff;
                                }
                            }
                        }
                    }

                }

                

            }
            .tr4{
                display: flex;
            }

            
        }
        
    }
    .auctionNUM{
      display: flex;
      justify-content: space-between;
      background-color: #fafafa;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 10px 20px;
      margin: 20px 0;
      font-size: 14px;
      .a_n_left{
        display: flex;
        align-items: center;
        .l_num{
          margin-right: 20px;
          .number{
            color: @base-color;
            font-size: 16px;
            font-weight: 600;
          }
        }
      }
      .a_n_right{
        /deep/.el-radio{
          &.is-checked {
            border: 1px solid @base-color !important;
          }
          //鼠标滑过改变字体和小圆圈边框的样式
          &:hover {
            border-color: @base-color !important;
            color: @base-color !important;
            //鼠标滑过时小圆点边框显示
            .el-radio__inner {
              border-color: @base-color;
            }
          }
          .el-radio__input {
            margin-bottom: px(5);
            //选中时的样式
            &.is-checked {
              .el-radio__inner {
                //选中时小圆圈的的颜色
                background-color: @base-color;
                border-color: @base-color;
              }
              + .el-radio__label {
                //选中时字体的颜色
                color: @base-color !important;
              }
            }
            .el-radio__inner {
              // 鼠标滑过小圆点时的样式
              &:hover {
                border-color: @base-color;
              }
            }
          }
          .el-radio__label{
            .el-icon-sort-up{
              background-color: #EBEEF5;
              padding: 4px;
              margin:0 8px;
              border-radius: 12px;
              &:hover{
                background-color: @base-color;
                color: #fff;
              }
            }
            
            .el-icon-sort-down{
              padding: 4px;
              background-color: #EBEEF5;
              border-radius: 12px;
              &:hover{
                background-color: @base-color;
                color: #fff;
              }
            }
          }
        }
        .picNumber{
          // height: 40px;
          padding-top: 6px;
        }
      }
    }




    .stateAll{
        width: 982px;
    }
    .all_item_ul{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        &:after{
            content: '';
            flex: auto;
            // width: 90px;
        }
        li{
            // width: 90px;
            span{
                display: inline-block;
                padding: 2px 10px;
                margin: 1px 6px;
                border-radius: 14px;
            }
            span:hover{
                background-color: @base-color;
                color: #fff;
            }
            // .typeFocus:focus{
            //     background-color: #cc0000;
            //     color: #fff;
            // }
            // .areaFocus:focus{
            //     background-color: #cc0000;
            //     color: #fff;
            // }
            
            // .timeFoucs:focus{
            //     background-color: #cc0000;
            //     color: #fff;
            // }
        }
    }
    .card{
        margin-top: 20px;
        .pai-item-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,278px);
            grid-gap: 20px;
        // display: flex;
        // flex-wrap:wrap;
        // justify-content: space-between;
        // &::after{
        //     content: '';
        //     flex: auto;
        //     // width: 280px;
        // }
        // .pai-item{
        //     margin:10px 10px 0 0;
        // }
        // .pai-item:nth-child(4n){
        //     margin:10px 0 0 0;
        // }
        .link_wrap{
            position: relative;
            display: inline-block;
            width: 280px;
            height: 355px;
            text-decoration: none;
            .item_card{
                border-radius: 10px;
            .image {
                // width: 100%;
                height: 190px;
                // display: block;
                position: relative;
                .lot_pic{  
                    display: block;
                    width: 100%;
                    height: 190px;
                    
                    /deep/.el-image__inner{
                        object-fit: cover;
                    }
                }
                .img-mask {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 30px;
                    /* 移除背景、毛玻璃、阴影，仅保留定位和flex */
                    background: none;
                    backdrop-filter: none;
                    box-shadow: none;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    z-index: 2;
                    /* 不要padding */
                    .redBtn {
                        display: flex;
                        align-items: center;
                        background: linear-gradient(90deg, fade(@base-color,90%) 60%, fade(@base-color,60%) 100%);
                        color: #fff;
                        font-size: 14px;
                        font-weight: 500;
                        border-radius: 10px 10px 16px 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 18px 0 16px;
                        box-shadow: 0 1px 6px rgba(228,61,51,0.10);
                        letter-spacing: 0.5px;
                        border: none;
                        margin-left: 0;
                        transition: box-shadow 0.2s, background 0.2s;
                        .wait-icon {
                            margin-right: 6px;
                            margin-left: 0;
                            display: block;
                            height: 18px;
                            width: 18px;
                        }
                    }
                }
            }
            .item_content{
                padding-left: 12px;
                padding-right: 12px;
                padding-top: 8px;           
                .item_title{
                    height: 56px;
                    font-size: 18px;
                    .in_item_title{
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    
                }
                .item_money{
                font-size: 14px;
                color: #606266;
                .m_rmb{
                    font-size: 12px;
                }
                .item_money_time{
                    p{
                    display: inline-block;  
                    color: #606266;
                    }
                    
                    p:last-of-type{
                    font-size: 12px;
                    font-weight: 400;
                    position: absolute;
                    right: 0px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 12px 0px 0px 12px;
                    color: #fff;
                    padding: 0 6px 0 10px;
                    }
                }
                }
                .item_money{
                p{
                    margin-bottom: 10px;
                }
                }
                .item_bottom{
                height: 40px;
                font-size: 12px;
                line-height: 40px;
                border-top: 1px solid rgb(237, 237, 237);
                display: flex;
                justify-content: space-between;
                color: rgb(153, 153, 153);
                }
            }
            }
            .item_card:hover{
                border: 1px solid @base-color;
            }

            
            
        }
        }

    }
    .red{
        color: @base-color;
    }
    .gray{
        color: #909399;
    }
    // .green{
    //     color: #67C23A;
    // }
   
    .grayBtn{
        background-color: #909399;
    }
    // .greenBtn{
    //     background-color: #67C23A;
    // }
    .redBtn{
        background-color: @base-color;
    }
    .moneyBig{
        font-size: 20px;
        font-weight: 400;
        margin-left: 4px;
        margin-top: 4px;
    }


}
</style>